<template>
    <div>
        <el-button type="danger" @click="AddFirst">添加一级分类</el-button>
        <hr class="hr-wrap">
        <div>
            <el-row :gutter="18">
                <el-col :span="12">
                    <div class="category-wrap">
                        <div class="category" v-for="firstItem in category.item" :key="firstItem.id">
                            <h4>
                                <svg-icon icon-class="plus"></svg-icon>
                                {{ firstItem.category_name }}
                                <div class="button-group">
                                    <el-button size="mini" type="danger" round>编辑</el-button>
                                    <el-button size="mini" type="success" round>添加子级</el-button>
                                    <el-button size="mini" round>删除</el-button>
                                </div>
                            </h4>
                            <ul v-if="firstItem.children" >
                                <li v-for="childrenItem in firstItem.children" :key="childrenItem.id">
                                    {{childrenItem.category_name}}
                                    <div class="button-group">
                                        <el-button size="mini" type="danger" round>编辑</el-button>
                                        <el-button size="mini" round>删除</el-button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- <div class="category">
                            <h4>
                                <svg-icon icon-class="plus"></svg-icon>新闻
                            </h4>
                            <ul>
                                <li>国内</li>
                                <li>国内</li>
                            </ul>
                        </div> -->
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="menu-title">
                        <h4>一级分类编辑</h4>
                    </div>
                    <el-form label-width="142px" class="form-wrap" ref="categoryForm">
                        <el-form-item label="一级分类名称" v-if="category_first_name">
                            <el-input v-model="form.categoryName" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="二级分类名称" v-if="category_second_name">
                            <el-input v-model="form.secCategoryName" size="mini" ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="submit" :loading="submit_button_loading">创建</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { reactive ,ref , isRef ,toRefs ,onMounted } from '@vue/composition-api';
import { AddFristCategory, GetCategory } from '../../api/news';
export default {
    name: 'IndexCategory',
    setup(props,{ root, refs}) {
        // const labelPosition = ref('right')
        const category_first_name = ref(true);
        const category_second_name = ref(true);
        const submit_button_loading = ref(false);

        const form = reactive({
            categoryName: '',
            secCategoryName: ''
        })
        const category = reactive({
        item: []
        })

        const AddFirst = (()=>{
            console.log('AddFirst', '')
            category_first_name.value = true;
            category_second_name.value = false;  
        })
        const getCategory = (()=>{
            console.log('getCategory', '')
            GetCategory({}).then(response =>{
                let data=response.data.data.data
                console.log(data)
                category.item = data
                // console.log(category[0])
            }).catch(erroe =>{

            })
        })
        //挂载
        onMounted(()=>{
            // console.log("qqq")
            getCategory();
        })
        const submit = (()=>{
            if(!form.categoryName) {
                root.$message({
                    message: "分类名称不能为空",
                    type: "error"
                })
                return false;
            }
            // 按钮加载状态
            submit_button_loading.value = true ;
            AddFristCategory({ categoryName: form.categoryName }).then(response =>{
                console.log('AddFristCategory', '')
                let data = response.data
                if(data.resCode === 0){
                console.log(data.message)
                    root.$message({
                        message: data.message,
                        type: "success"
                    })
                    category.item.push(response.data.data)
                    // getCategory();
                }
                submit_button_loading.value=false
                // root.$refs.categoryForm.resetFields();
            }).catch(error =>{
                submit_button_loading.value=false
                // root.$refs.categoryForm.resetFields();
            })
        })
        return{
            category,category_first_name,category_second_name,
            submit_button_loading,
            form,submit,AddFirst,getCategory
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";
hr{
    width:calc(100% + 60px);
    margin-left:-30px;
    border:none;
    margin-top:30px;
    margin-bottom:30px;
    border-bottom:1px solid #e9e9e9
}
.category-wrap{
    div:first-child{
        &:before{
            top: 20px;
        }
    }
    div:last-child{
        &:before{
            bottom: 20px;
        }
    }
}
.category{
position: relative;
    line-height: 44px;
    cursor: pointer;
    &:before {
        content: '';
        position: absolute;
        left: 22px;
        top: 0;
        bottom: 0;
        width: 32px;
        border-left: 1px dotted #000;
    }
    h4 {
        position: relative;
        padding-left: 40px;
    }
    svg {
        position: absolute;
        left: 15px;
        top: 15px;
        background: #fff;
        font-size: 17px;
    }
    li {
        position: relative;
        padding-left: 36px;
        margin-left: 24px;
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 22px;
            width: 32px;
            border-bottom: 1px dotted #000;
        }
    }
    li,h4{
        @include webkit(transition, all .5s ease 0s);
        &:hover{ 
            background-color: #f3f3f3;
            .button-group{
                display: block;
            }
        }
    }
}
.button-group{
    display: none;
    position: absolute;
    z-index: 2;
    right: 12px;
    top: -1px;
    button { font-size: 10px;}
}
.menu-title{
    line-height: 44px;
    padding-left: 22px;
    background-color: #f3f3f3;
}
.form-wrap{
    width: 410px;
    padding-top: 26px;
}
</style>






<template>
  <div>
      <el-dialog title="编辑" :visible.sync="dialog_info_flag" @opened="openDialog" @close="close" width="530px">
   <el-form :model="form" ref="addInfoForm">
    <el-form-item label="类别" :label-width="formLabelWidth" prop="category">
      <el-select v-model="form.category" placeholder="请选择活动区域">
        <el-option 
          :label="title_items.category_name" 
          v-for="title_items in options_category.item" 
          :key="title_items.id"
          :value="title_items.id" >
          </el-option>
        <!-- <el-option label="区域二" value="beijing"></el-option> -->
      </el-select>
    </el-form-item>
    <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>

    <el-form-item label="概况" :label-width="formLabelWidth" prop="content">
      <el-input type="textarea" v-model="form.content" placeholder="请输入内容" style="height:100px;"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="close">取消</el-button>
    <el-button type="primary" @click="submit_addInfo" :loading="submit_addInfo_loading">确定</el-button>
  </div>
      </el-dialog>
  </div>
</template>

<script>
import { reactive ,ref, watch } from '@vue/composition-api';
import { AddInfo, GetList } from '../../../api/news';
export default {
  name: "dialogEdit",
  props:{
    flag: {
      type: Boolean,
      default: false
    },
    category:{
      type: Array,
      default: (()=>{

      })
    },
    id:{
      type: Array,
      default: (()=>{

      })
    }
  },
  //vue3.0
  setup(props, { emit,root, refs }) {
    const dialog_info_flag = ref(false);
    const formLabelWidth = ref('40px');
    const form = reactive({
          category: '',
          title: '',
          content: ''
    });
    const resetForm = (()=>{
      form.category = '',
      form.title = '',
      form.content = ''
    })
    const options_category = reactive({
      item:[]
    })
    const close = () => {
      dialog_info_flag.value=false;
      resetForm();
      console.log('colse')
      emit("update:flag",false);
      //'close' 即回调父组件的close属性
      // this.$emit('close',false);
    }
    const openDialog = (()=>{
        console.log('openDialog', '')
        // form.category = props.category
        //保存到变量数组中
        options_category.item = props.category;
        // console.log(props.id, 'props.id')
        getEdit();
        // console.log(options_category.item)
    })
    const getEdit = (() => {
        console.log('getEdit', '')
        let requestData = {
            pageNumber: 1,
            pageSize: 1,
            id: props.id
        }
        console.log(requestData, '')

        // GetList(requestData).then(response =>{
        //     responseData = response.data.data.data[0]
        //     console.log(responseData, '3.datacategoryId')
        //     // console.log(responseData.categoryId, '3.datacategoryId')
        //     // console.log(responseData.title, '3.datacategoryId2')
        //     // console.log(responseData.content, '3.datacategoryId2')

        //     // form = {
        //     //     category: responseData.categoryId,
        //     //     title: responseData.title,
        //     //     content: responseData.content
        //     // }
        //     // console.log(form, 'form.data')
        // }).catch(error =>{

        // })
    })






    watch(()=> {
        dialog_info_flag.value = props.flag;
        // console.log('dialog_info_flag', '')
        // console.log(props)

    })
    const submit_addInfo_loading = ref(false)
    const submit_addInfo = (()=>{
      console.log('AddInfo1', '')
        let requestData = {
            categoryId: form.category,//categoryId才可成功，根据接口要求，category显示标题和内容都是错误的
            title: form.title,
            content: form.content,
        }
        submit_addInfo_loading.value = true;
        console.log(requestData)
        if(!form.category){
          root.$message({
              message: '标题、类型不能为空！!',
              type: 'error'
          })
          return false  //不跑接口提示信息
        }
        AddInfo(requestData).then(response => {
            console.log('success', '')
            // console.log(response)
            let responseData = response.data
            root.$message({
                message: responseData.message,
                type: 'success'
            })
            submit_addInfo_loading.value = false
            // resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            // root.$refs['addInfoForm'].resetFields();
            //重置表单有两种方法
            resetForm()
        }).catch(error => {
            submit_addInfo_loading.value = false
        })
    })
    return{
      dialog_info_flag,formLabelWidth,form,close,openDialog,
      options_category,submit_addInfo,submit_addInfo_loading,
      resetForm,getEdit,
    }
  }
  //vue2.0
  // data() {
  //   return {
  //   }
  // },
  // vue2.0
  // methods: {
  //   close() {
  //     this.dialog_info_flag=false
  //     console.log(111)
  //     this.$emit("update:flag",false);
  //     //'close' 即回调父组件的close属性
  //     // this.$emit('close',false);
  //   },
  // },
  //单向数据流，父级 -> 子级

  // watch: {
  //   flag:{
  //     handler(newValue, oldValue) {
  //       this.dialog_info_flag = newValue;
  //     },
  //   }
  // },

}
</script>

<style>
.el-textarea__inner {
  height: 100px;
}
</style>